<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width"/>

<meta name="theme-color" content="#414852"/>


<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata|Itim|Lobster.css">
<link rel="icon" type="image/png" sizes="64x64" href="/images/favicon/xin-64.png" /><link rel="icon" type="image/png" sizes="128x128" href="/images/favicon/xin-128.png" /><link rel="apple-touch-icon" sizes="128x128" href="/images/favicon/xin-128.png" /><link rel="mask-icon" color="white" href="/images/favicon/xin.svg" />  <meta name="description" content="一个全新的自定义主题方式，分享你的Code。">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo NexT 高阶教程之 Injects">
<meta property="og:url" content="https://jiangtj.com/articles/beechnut/hexo-next-injects/index.html">
<meta property="og:site_name" content="Dnocm ☀">
<meta property="og:description" content="一个全新的自定义主题方式，分享你的Code。">
<meta property="og:locale">
<meta property="article:published_time" content="2019-07-11T01:54:31.000Z">
<meta property="article:modified_time" content="2019-07-11T01:54:31.000Z">
<meta property="article:author" content="Mr.J">
<meta property="article:tag" content="Hexo">
<meta property="article:tag" content="NexT">
<meta name="twitter:card" content="summary">  <title>Hexo NexT 高阶教程之 Injects | Dnocm ☀</title>    <script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://jiangtj.com/articles/beechnut/hexo-next-injects/"},"headline":"Hexo NexT 高阶教程之 Injects","image":[],"datePublished":"2019-07-11T01:54:31.000Z","dateModified":"2019-07-11T01:54:31.000Z","author":{"@type":"Person","name":"Mr.J"},"publisher":{"@type":"Organization","name":"Mr.J","logo":{"@type":"ImageObject","url":"https://jiangtj.com/images/avatar.jpg"}}}</script><script data-ad-client="ca-pub-8243423215749776" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<meta name="google-site-verification" content="TWf4Ma3V7xRcvKFWw_1iOCJKgNJmUUB1CmLucKjvV2A" />
<meta name="baidu-site-verification" content="xtf2YgRPUK" />

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132230328-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-132230328-1');
</script>
<link rel="stylesheet" type="text/css" href="/css/injector/main.css" /><link rel="preload" as="style" href="/css/injector/light.css" /><link rel="preload" as="style" href="/css/injector/dark.css" /><link rel="preload" as="style" href="/css/injector/auto.css" /><!-- hexo injector head_end start --><link rel="manifest" href="/manifest.json" /><!-- hexo injector head_end end --><meta name="generator" content="Hexo 6.1.0"><link rel="alternate" href="/rss2.xml" title="Dnocm ☀" type="application/rss+xml">
</head>

<body>

    
  <header class="main-header">
    <div class="header-inner card"><div class="brand">
  <div class="site-meta">
    <div class="custom-logo-site-title">
      <a href="/">
        <span class="site-title">Dnocm ☀</span>
      </a>
    </div>
    
  </div>

  <div class="site-nav-toggle">
    <button>
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>    </button>
  </div>
</div>
<nav class="site-nav">
  <ul class="menu">
    <li class="menu-item menu-item-home"><a href="/"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>首页</a></li><li class="menu-item menu-item-tags"><a href="/tags/"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="tags" class="svg-inline--fa fa-tags icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path></svg>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="th" class="svg-inline--fa fa-th icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"></path></svg>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="archive" class="svg-inline--fa fa-archive icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 448c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V160H32v288zm160-212c0-6.6 5.4-12 12-12h104c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H204c-6.6 0-12-5.4-12-12v-8zM480 32H32C14.3 32 0 46.3 0 64v48c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16V64c0-17.7-14.3-32-32-32z"></path></svg>归档</a></li><li class="menu-item menu-item-more"><a href="/more/"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" class="svg-inline--fa fa-info-circle icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg>More</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>搜索</a></li>  </ul>
</nav>
</div>
  </header>

  <div class="flex-container">

    

<aside class="sidebar">

  <div class="header-inner card">
    <div class="brand">
  <div class="site-meta">
    <div class="custom-logo-site-title">
      <a href="/">
        <span class="site-title">Dnocm ☀</span>
      </a>
    </div>
    
  </div>

  <div class="site-nav-toggle">
    <button>
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>    </button>
  </div>
</div>
<nav class="site-nav">
  <ul class="menu">
    <li class="menu-item menu-item-home"><a href="/"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="svg-inline--fa fa-home icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>首页</a></li><li class="menu-item menu-item-tags"><a href="/tags/"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="tags" class="svg-inline--fa fa-tags icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path></svg>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="th" class="svg-inline--fa fa-th icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"></path></svg>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="archive" class="svg-inline--fa fa-archive icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M32 448c0 17.7 14.3 32 32 32h384c17.7 0 32-14.3 32-32V160H32v288zm160-212c0-6.6 5.4-12 12-12h104c6.6 0 12 5.4 12 12v8c0 6.6-5.4 12-12 12H204c-6.6 0-12-5.4-12-12v-8zM480 32H32C14.3 32 0 46.3 0 64v48c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16V64c0-17.7-14.3-32-32-32z"></path></svg>归档</a></li><li class="menu-item menu-item-more"><a href="/more/"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle" class="svg-inline--fa fa-info-circle icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg>More</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>搜索</a></li>  </ul>
</nav>
  </div>

  <div class="sidebar-inner card">

    

    <ul class="sidebar-nav">
      <li class="sidebar-nav-toc sidebar-nav-active">
        文章目录
      </li>
      <li class="sidebar-nav-overview">
        站点概览
      </li>
    </ul>
    <div class="post-toc-wrap sidebar-panel sidebar-panel-active">
      <div class="post-toc"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%89%8D%E4%B8%96%E5%9B%A0"><span class="nav-number">1.</span> <span class="nav-text">前世因</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8-Injects"><span class="nav-number">2.</span> <span class="nav-text">使用 Injects</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B3%A8%E5%85%A5%E5%B8%83%E5%B1%80"><span class="nav-number">2.1.</span> <span class="nav-text">注入布局</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%B3%A8%E5%85%A5%E6%A0%B7%E5%BC%8F"><span class="nav-number">2.2.</span> <span class="nav-text">注入样式</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%88%B6%E4%BD%9CNPM%E6%8F%92%E4%BB%B6"><span class="nav-number">3.</span> <span class="nav-text">制作NPM插件</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E4%B8%80%E4%B8%AANPM%E5%8C%85"><span class="nav-number">3.1.</span> <span class="nav-text">初始化一个NPM包</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E4%BE%8B%E5%AD%90%E5%B7%A5%E7%A8%8B%E9%A2%84%E8%A7%88%E6%8F%92%E4%BB%B6"><span class="nav-number">3.2.</span> <span class="nav-text">创建例子工程预览插件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%B8%83%E5%B1%80%E4%B8%8E%E6%A0%B7%E5%BC%8F"><span class="nav-number">3.3.</span> <span class="nav-text">布局与样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%84%9A%E6%9C%AC"><span class="nav-number">3.4.</span> <span class="nav-text">脚本</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%B8%8A%E4%BC%A0%E4%B8%8E%E5%88%86%E4%BA%AB"><span class="nav-number">3.5.</span> <span class="nav-text">上传与分享</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%85%B6%E5%AE%83"><span class="nav-number">3.6.</span> <span class="nav-text">其它</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%90%8E%E4%B8%96%E6%9E%9C"><span class="nav-number">4.</span> <span class="nav-text">后世果</span></a></li></ol></div>
    </div>
    <div class="site-overview-wrap sidebar-panel">
      <div class="site-overview">
  <div class="site-author">
    
    <img class="site-author-image" src="/images/avatar.jpg"
      alt="Mr.J" />
    
    <p class="site-author-name">Mr.J</p>
    <div class="site-description">何须更问浮生事，只此浮生是梦中</div>
  </div>

  <nav class="site-state">
    
    <div class="site-state-item site-state-posts">
      <a href="/archives/">
        <span class="site-state-item-count">64</span>
        <span class="site-state-item-name">日志</span>
      </a>
    </div>
    

    
    <div class="site-state-item site-state-categories">
      <a href="/categories/">
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">分类</span>
      </a>
    </div>
    

    
    <div class="site-state-item site-state-tags">
      <a href="/tags/">
        <span class="site-state-item-count">48</span>
        <span class="site-state-item-name">标签</span>
      </a>
    </div>
    
  </nav>

  <div class="social-links"><a href="mailto:i@dnocm.com" title="mailto:i@dnocm.com" rel="noopener" target="_blank"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" class="svg-inline--fa fa-envelope icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg></a><a href="https://t.me/dnocm" title="https://t.me/dnocm" rel="noopener" target="_blank"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="telegram" class="svg-inline--fa fa-telegram icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"></path></svg></a><a href="/rss2.xml" title="/rss2.xml" rel="noopener" target="_blank"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="rss" class="svg-inline--fa fa-rss icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M128.081 415.959c0 35.369-28.672 64.041-64.041 64.041S0 451.328 0 415.959s28.672-64.041 64.041-64.041 64.04 28.673 64.04 64.041zm175.66 47.25c-8.354-154.6-132.185-278.587-286.95-286.95C7.656 175.765 0 183.105 0 192.253v48.069c0 8.415 6.49 15.472 14.887 16.018 111.832 7.284 201.473 96.702 208.772 208.772.547 8.397 7.604 14.887 16.018 14.887h48.069c9.149.001 16.489-7.655 15.995-16.79zm144.249.288C439.596 229.677 251.465 40.445 16.503 32.01 7.473 31.686 0 38.981 0 48.016v48.068c0 8.625 6.835 15.645 15.453 15.999 191.179 7.839 344.627 161.316 352.465 352.465.353 8.618 7.373 15.453 15.999 15.453h48.068c9.034-.001 16.329-7.474 16.005-16.504z"></path></svg></a><a href="https://github.com/JiangTJ" title="https://github.com/JiangTJ" rel="noopener" target="_blank"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div><div class="font-size-ol"><a class="font-size-ol-sub">A-</a><span class="font-size-ol-value">14</span><a class="font-size-ol-plus">A+</a></div>
</div>
    </div>

    

  </div>
</aside>

    <div class="flex-main">

      <main>
        
        <div id="content" class="content">
          <div>
  

<article class="post post-type-normal">
  <div class="card post-block">

    

    <header class="post-header">

      
      <h1 class="post-title">
        
        Hexo NexT 高阶教程之 Injects
        
      </h1>
      

      <div class="post-meta">

  
  
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="calendar" class="svg-inline--fa fa-calendar icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V160h352v298c0 3.3-2.7 6-6 6z"></path></svg>
    </span>
    <span class="post-meta-item-text">发表于</span>
    <time title="创建时间：2019-07-11 09:54:31">2019-07-11</time>
  </span>
  

  

  
  
  <span class="post-meta-item">
    <span class="post-meta-item-icon">
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder" class="svg-inline--fa fa-folder icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"></path></svg>
    </span>
    <span class="post-meta-item-text">分类于</span>
    <span><a href="/categories/%E5%89%8D%E7%AB%AF/" rel="index"><span>前端</span></a></span>  </span>
  

  
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="globe" class="svg-inline--fa fa-globe icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"></path></svg>
        <i class="fa fa-globe"></i>
      </span>
      <span class="post-meta-item-text">post.i18n</span>
      <span>中文</span>,<a href="/en/articles/beechnut/hexo-next-injects/"><span>English</span></a>
    </span>
  
  <div class="post-description">一个全新的自定义主题方式，分享你的Code。</div>
  

</div>

    </header>

    <div class="post-body">
      
      <h1 id="前世因" class="article-heading"><a href="#前世因" class="headerlink" title="前世因"></a>前世因<a class="article-anchor" href="#前世因" aria-hidden="true"></a></h1><p>这要追溯到3月份，Mimi的<a target="_blank" rel="noopener" href="https://github.com/theme-next/hexo-theme-next/pull/663">PR:Adding Submodule</a>，我们讨论了如何管理第三方依赖。LEAFERx提出了使用NPM管理会更好，他进行了实践PR:Extract leancloud-counter to plugins <a target="_blank" rel="noopener" href="https://github.com/theme-next/hexo-theme-next/pull/677">#677</a> <a target="_blank" rel="noopener" href="https://github.com/theme-next/hexo-theme-next/pull/707">#707</a>。在我看来LEAFERx的方案并不好，因为复杂。所以要做到插件化，有两个必须达到的要求：</p>
<ol>
<li>灵活与可扩展性，在插件中，我们就要能修改大部分内容。</li>
<li>操作简单，我们通过极少的代码集成我们想要的功能。</li>
</ol>
<p>除此外，ivan-nginx还关心文档的问题，但如果能完全独立，存放在插件库中也不是什么大问题。在此期间，我也进行过尝试<a target="_blank" rel="noopener" href="https://github.com/theme-next/hexo-theme-next/pull/711">PR:Refactoring comments</a>，毕竟现在的评论系统真的”烂”，一堆<code>if else</code>。这次的重构是挺好的尝试，但我不敢轻易合，因为影响大（几乎所有人），而后来发现了另一个方案，是Hexo的一个插件<a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo-inject">hexo-inject</a>，通过注入代码的方式实现定制内容，由于hexo本身与主题分离，它仅能提供4个注入点，可扩展性远远不够。但如果能在NexT中实现，就完全不同了，于是我提了<a target="_blank" rel="noopener" href="https://github.com/theme-next/hexo-theme-next/pull/868">PR:Add new filter type theme_inject</a></p>
<span id="more"></span>

<h1 id="使用-Injects" class="article-heading"><a href="#使用-Injects" class="headerlink" title="使用 Injects"></a>使用 Injects<a class="article-anchor" href="#使用-Injects" aria-hidden="true"></a></h1><p>Okay，缘由讲到这，接下来来体验下如何使用<code>theme_inject</code>。当然，如果你是小白，完全可以使用配置文件中的<code>custom_file_path</code>来添加自定义内容。如果想更加定义化，那么跟着我一步步走下去。Injects具体的定义见<a target="_blank" rel="noopener" href="https://theme-next.org/docs/advanced-settings#Injects">NexT文档</a>。这里接下来是个例子，一步步集成<a target="_blank" rel="noopener" href="https://sidecar.gitter.im/">gitter</a>。</p>
<h2 id="注入布局" class="article-heading"><a href="#注入布局" class="headerlink" title="注入布局"></a>注入布局<a class="article-anchor" href="#注入布局" aria-hidden="true"></a></h2><p>首先，我们在hexo或者theme的<code>scripts</code>创建一个js文件（名字随意），添加以下内容。只要是这里面的脚本，hexo运行时会执行它。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs js">hexo.<span class="hljs-property">extend</span>.<span class="hljs-property">filter</span>.<span class="hljs-title function_">register</span>(<span class="hljs-string">&#x27;theme_inject&#x27;</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params">injects</span>) &#123;<br>  <span class="hljs-comment">//名字路径等都可以随意修改，为了方便下文都以这里的定义为主</span><br>  injects.<span class="hljs-property">head</span>.<span class="hljs-title function_">file</span>(<span class="hljs-string">&#x27;gitter&#x27;</span>, <span class="hljs-string">&#x27;views/gitter.swig&#x27;</span>, &#123;&#125;, &#123;<span class="hljs-attr">cache</span>: <span class="hljs-literal">true</span>&#125;);<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>第二步，我们创建<code>views/gitter.swig</code>文件，添加以下内容。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">  ((<span class="hljs-variable language_">window</span>.<span class="hljs-property">gitter</span> = &#123;&#125;).<span class="hljs-property">chat</span> = &#123;&#125;).<span class="hljs-property">options</span> = &#123;</span><br><span class="language-javascript">    <span class="hljs-attr">room</span>: <span class="hljs-string">&#x27;your-room-name&#x27;</span></span><br><span class="language-javascript">  &#125;&#125;);</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://sidecar.gitter.im/dist/sidecar.v1.js&quot;</span> <span class="hljs-attr">async</span> <span class="hljs-attr">defer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><code>hexo s</code>运行，你可以看到右下角已经集成了gitter。</p>
<h2 id="注入样式" class="article-heading"><a href="#注入样式" class="headerlink" title="注入样式"></a>注入样式<a class="article-anchor" href="#注入样式" aria-hidden="true"></a></h2><p>接下来，我们调整下样式。在脚本中，多加样式的注入。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs js">hexo.<span class="hljs-property">extend</span>.<span class="hljs-property">filter</span>.<span class="hljs-title function_">register</span>(<span class="hljs-string">&#x27;theme_inject&#x27;</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params">injects</span>) &#123;<br>  injects.<span class="hljs-property">head</span>.<span class="hljs-title function_">file</span>(<span class="hljs-string">&#x27;gitter&#x27;</span>, <span class="hljs-string">&#x27;views/gitter.swig&#x27;</span>, &#123;&#125;, &#123;<span class="hljs-attr">cache</span>: <span class="hljs-literal">true</span>&#125;);<br>  injects.<span class="hljs-property">style</span>.<span class="hljs-title function_">push</span>(<span class="hljs-string">&#x27;views/gitter.styl&#x27;</span>);<br>&#125;);<br></code></pre></td></tr></table></figure>

<p>创建<code>views/gitter.styl</code>文件</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.gitter-open-chat-button</span> &#123;<br>  <span class="hljs-attribute">background-color</span>: slateblue;<br>  <span class="hljs-attribute">margin-bottom</span>: .<span class="hljs-number">8rem</span>;<br>  <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">1rem</span>;<br>  <span class="hljs-attribute">padding</span>: .<span class="hljs-number">4rem</span> .<span class="hljs-number">8rem</span>;<br>  <span class="hljs-attribute">border-radius</span>: .<span class="hljs-number">6rem</span>;<br>  <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0</span> <span class="hljs-number">0</span> .<span class="hljs-number">4rem</span> <span class="hljs-number">#111</span>;<br>  <span class="hljs-attribute">opacity</span>: .<span class="hljs-number">9</span>;<br>&#125;<br><br><span class="hljs-selector-class">.gitter-open-chat-button</span><span class="hljs-selector-pseudo">:focus</span>,<span class="hljs-selector-class">.gitter-open-chat-button</span><span class="hljs-selector-pseudo">:hover</span> &#123;<br>  <span class="hljs-attribute">background-color</span>: slateblue;<br>  <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">0.8rem</span> <span class="hljs-number">#111</span>;<br>&#125;<br><br><span class="hljs-selector-class">.gitter-open-chat-button</span><span class="hljs-selector-class">.is-collapsed</span> &#123;<br>  <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateY</span>(<span class="hljs-number">150%</span>);<br>&#125;<br><br><span class="hljs-selector-class">.sidebar-toggle</span> &#123;<br>  <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">18px</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<p>再次运行，按钮的样式变咯，你觉得相对于原来是好看还是…？</p>
<h1 id="制作NPM插件" class="article-heading"><a href="#制作NPM插件" class="headerlink" title="制作NPM插件"></a>制作NPM插件<a class="article-anchor" href="#制作NPM插件" aria-hidden="true"></a></h1><p>开源的精神在于分享，当你将你的主题自定义之后，你可能会写一篇文章《如何实现在NexT中XXXX》。然后，Visitor看到后，跟着你一点点的改。虽然没什么问题。但毕竟“懒”才是原动力，如果我们能将这一切放入到一个NPM插件中，那么他们使用的时候，就只需要<code>yarn add xxxx</code>就行了。这将多方便呀！！！</p>
<p>接下来要实现是一个集合滑动到底部&#x2F;头部和阅读进度的插件，最终效果见<a target="_blank" rel="noopener" href="https://github.com/jiangtj-lab/hexo-cake-moon-menu">hexo-cake-moon-menu</a>，以及右下角的那个按钮</p>
<p>为了能上传至NPM仓库，你首先需要在它上面创建一个账户:<a target="_blank" rel="noopener" href="https://www.npmjs.com/">https://www.npmjs.com/</a>，另外为了方便，我是用的是yarn作为命令行工具</p>
<h2 id="初始化一个NPM包" class="article-heading"><a href="#初始化一个NPM包" class="headerlink" title="初始化一个NPM包"></a>初始化一个NPM包<a class="article-anchor" href="#初始化一个NPM包" aria-hidden="true"></a></h2><p>新建一个文件夹，并在里面运行<code>yarn init</code>，会问你一系列的问题(如下面)，完成后会初始化一个package.json</p>
<figure class="highlight cmd"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs cmd">PS C:\Users\MrTT\Desktop\hexo-moon-menu&gt; yarn init<br>yarn init v1.<span class="hljs-number">16</span>.<span class="hljs-number">0</span><br>question name (hexo-moon-menu): @jiangtj/hexo-moon-menu<br>question version (<span class="hljs-number">1</span>.<span class="hljs-number">0</span>.<span class="hljs-number">0</span>):<br>question description: Hallo<br>question entry point (index.js):<br>question repository url: https://github.com/jiangtj/hexo-theme-cake.git<br>question author: Mr.J<br>question license (MIT): LGPL-<span class="hljs-number">3</span>.<span class="hljs-number">0</span><br>question private: false<br>success Saved package.json<br>Done <span class="hljs-keyword">in</span> <span class="hljs-number">99</span>.<span class="hljs-number">85</span>s.<br></code></pre></td></tr></table></figure>

<ul>
<li>name建议添加<code>@scope</code>也就是<code>@你的用户名</code>，毕竟到时候有一样名字的包，无法上传</li>
<li>name必须以<code>hexo-</code>或者<code>@scope/hexo-</code>开头</li>
</ul>
<h2 id="创建例子工程预览插件" class="article-heading"><a href="#创建例子工程预览插件" class="headerlink" title="创建例子工程预览插件"></a>创建例子工程预览插件<a class="article-anchor" href="#创建例子工程预览插件" aria-hidden="true"></a></h2><p>你需要将你的插件上传上出（这步原本是最后一步，但由于hexo会检测package.json来执行插件，所以必须先有插件），在当前项目中运行<code>yarn publish --access public</code></p>
<p>添加一个<code>.gitignore</code>，如果默认情况下，npm也会依据它忽略不必要的文件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs plaintext">node_modules/<br>*.log<br>example/<br></code></pre></td></tr></table></figure>

<p>运行以下命令，来创建例子项目</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs bash"><span class="hljs-comment"># 在example创建hexo项目</span><br>hexo init example<br><span class="hljs-comment"># 进入到example目录下</span><br><span class="hljs-built_in">cd</span> example<br><span class="hljs-comment"># 添加next主题</span><br>git <span class="hljs-built_in">clone</span> https://github.com/theme-next/hexo-theme-next themes/next<br><span class="hljs-comment"># 切换主题配置</span><br>hexo config theme next<br><span class="hljs-comment"># 切换Gemini scheme, 这次的插件由于和展开侧边栏的冲突，所以Muse中暂时不支持，如果你感兴趣可以自行在Muse中实现</span><br>hexo config theme_config.scheme Gemini<br><span class="hljs-comment"># 运行预览</span><br>hexo s<br></code></pre></td></tr></table></figure>

<p>关联插件</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs bash"><span class="hljs-comment"># 添加依赖</span><br>yarn add <span class="hljs-string">&quot;@jiangtj/hexo-moon-menu&quot;</span><br><span class="hljs-comment"># 为插件创建引用，来调试</span><br><span class="hljs-built_in">cd</span> ..<br>yarn <span class="hljs-built_in">link</span><br><span class="hljs-built_in">cd</span> example<br>yarn <span class="hljs-built_in">link</span> <span class="hljs-string">&quot;@jiangtj/hexo-moon-menu&quot;</span><br><span class="hljs-comment"># 运行预览，由于什么都没做所以没什么变话</span><br>hexo s<br></code></pre></td></tr></table></figure>

<h2 id="布局与样式" class="article-heading"><a href="#布局与样式" class="headerlink" title="布局与样式"></a>布局与样式<a class="article-anchor" href="#布局与样式" aria-hidden="true"></a></h2><p>接下来将我的项目中<a target="_blank" rel="noopener" href="https://github.com/jiangtj-lab/hexo-cake-moon-menu">hexo-cake-moon-menu</a>以下部分复制到你的插件项目</p>
<ul>
<li>default.yaml 默认配置</li>
<li>moon-menu.swig 菜单的布局</li>
<li>moon-menu.styl 菜单的样式</li>
</ul>
<p>在上面的Injects使用中，你能体会到重点在于js脚本，样式等都是通过它进行组织的，所以样式我就忽略了，如果你想研究可以查看那些</p>
<h2 id="脚本" class="article-heading"><a href="#脚本" class="headerlink" title="脚本"></a>脚本<a class="article-anchor" href="#脚本" aria-hidden="true"></a></h2><p>package.json 中的 main 定义了脚本的入口文件，默认是<code>index.js</code>，所以我们创建它，并添加以下内容</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">// 需要引入的依赖</span><br><span class="hljs-keyword">const</span> yaml = <span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;js-yaml&#x27;</span>);<br><span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;fs&#x27;</span>);<br><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;path&#x27;</span>);<br><br>hexo.<span class="hljs-property">extend</span>.<span class="hljs-property">filter</span>.<span class="hljs-title function_">register</span>(<span class="hljs-string">&#x27;theme_inject&#x27;</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params">injects</span>) &#123;<br><br>  <span class="hljs-comment">// 需要禁用原本的按钮</span><br>  hexo.<span class="hljs-property">theme</span>.<span class="hljs-property">config</span>.<span class="hljs-property">back2top</span>.<span class="hljs-property">enable</span> = <span class="hljs-literal">false</span>;<br><br>  <span class="hljs-comment">// 读取默认配置文件</span><br>  <span class="hljs-comment">// __dirname至该文件的绝对目录，需要注意这里的位置如果不使用path获取绝对路径，文件读出会异常（建议你尝试，体验npm的坑）</span><br>  <span class="hljs-keyword">let</span> defaultConfig = yaml.<span class="hljs-title function_">load</span>(fs.<span class="hljs-title function_">readFileSync</span>(path.<span class="hljs-title function_">join</span>(__dirname, <span class="hljs-string">&#x27;default.yaml&#x27;</span>)));<br>  <span class="hljs-comment">// 合并默认配置与hexo里的moon_menu配置</span><br>  <span class="hljs-keyword">let</span> moonMenu = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">assign</span>(defaultConfig, hexo.<span class="hljs-property">config</span>.<span class="hljs-property">moon_menu</span>);<br><br>  <span class="hljs-comment">// 重新组织菜单，排序等</span><br>  <span class="hljs-keyword">let</span> moonMenuArr = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(moonMenu)<br>    .<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">key</span> =&gt;</span> moonMenu[key])<br>    .<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> &#123;<br>      item.<span class="hljs-property">order</span> = item.<span class="hljs-property">order</span> || <span class="hljs-number">0</span>;<br>      <span class="hljs-keyword">if</span> (item.<span class="hljs-property">enable</span> === <span class="hljs-literal">undefined</span>) &#123;<br>        item.<span class="hljs-property">enable</span> = <span class="hljs-literal">true</span>;<br>      &#125;<br>      <span class="hljs-keyword">return</span> item;<br>    &#125;)<br>    .<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item.<span class="hljs-property">enable</span>)<br>    .<span class="hljs-title function_">sort</span>(<span class="hljs-function">(<span class="hljs-params">a, b</span>) =&gt;</span> a.<span class="hljs-property">order</span> - b.<span class="hljs-property">order</span>);<br><br>  <span class="hljs-comment">// 添加布局</span><br>  injects.<span class="hljs-property">bodyEnd</span>.<span class="hljs-title function_">file</span>(<span class="hljs-string">&#x27;moon-menu&#x27;</span>, path.<span class="hljs-title function_">join</span>(__dirname, <span class="hljs-string">&#x27;moon-menu.swig&#x27;</span>), &#123;<span class="hljs-attr">menus</span>: moonMenuArr&#125;, &#123;<span class="hljs-attr">cache</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">only</span>: <span class="hljs-literal">true</span>&#125;);<br>  <span class="hljs-comment">// 添加样式</span><br>  injects.<span class="hljs-property">style</span>.<span class="hljs-title function_">push</span>(path.<span class="hljs-title function_">join</span>(__dirname, <span class="hljs-string">&#x27;moon-menu.styl&#x27;</span>));<br><br>&#125;);<br></code></pre></td></tr></table></figure>

<p>忘了，你需要添加<code>js-yaml</code>依赖用于解析yaml</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs bash"><span class="hljs-built_in">cd</span> ..<br>yarn add js-yaml<br><span class="hljs-built_in">cd</span> example<br>hexo s<br></code></pre></td></tr></table></figure>

<p>再次运行预览，你就可以看到按钮添加到你的例子工程中拉</p>
<h2 id="上传与分享" class="article-heading"><a href="#上传与分享" class="headerlink" title="上传与分享"></a>上传与分享<a class="article-anchor" href="#上传与分享" aria-hidden="true"></a></h2><p>完成后记得别忘记上传<code>yarn publish --access public</code>，然后赶紧在自己的博客中试下把<code>yarn add @jiangtj/hexo-moon-menu</code></p>
<p>如果你希望更多看到与使用你的插件，欢迎提交PR至 <a target="_blank" rel="noopener" href="https://github.com/theme-next/awesome-next">Awesome-NexT</a></p>
<h2 id="其它" class="article-heading"><a href="#其它" class="headerlink" title="其它"></a>其它<a class="article-anchor" href="#其它" aria-hidden="true"></a></h2><p>我们在插件中也可以载入其他hexo的插件，在添加hexo插件（<code>yarn add plugin-name</code>）之后。通过以下代码加载脚本</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">const</span> tagcloud = hexo.<span class="hljs-title function_">resolvePlugin</span>(<span class="hljs-string">&#x27;plugin-name&#x27;</span>)<br>hexo.<span class="hljs-title function_">loadPlugin</span>(tagcloud).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>  hexo.<span class="hljs-property">log</span>.<span class="hljs-title function_">debug</span>(<span class="hljs-string">&#x27;Plugin loaded: plugin-name&#x27;</span>);<br>&#125;).<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> &#123;<br>  hexo.<span class="hljs-property">log</span>.<span class="hljs-title function_">error</span>(&#123;err&#125;, <span class="hljs-string">&#x27;Plugin load failed: plugin-name&#x27;</span>);<br>&#125;);<br>hexo.<span class="hljs-property">extend</span>.<span class="hljs-property">filter</span>.<span class="hljs-title function_">register</span>(<span class="hljs-string">&#x27;theme_inject&#x27;</span>, <span class="hljs-function"><span class="hljs-params">injects</span> =&gt;</span> &#123;<br>  <span class="hljs-comment">//...</span><br>&#125;);<br></code></pre></td></tr></table></figure>

<blockquote>
<p>注意：<code>hexo.loadPlugin</code>需要放在过滤器等的外边，确保其在第一时间执行，上面的代码来自一个例子：<a target="_blank" rel="noopener" href="https://github.com/jiangtj-lab/hexo-next-wapper-tag-cloud">hexo-next-wapper-tag-cloud</a></p>
</blockquote>
<h1 id="后世果" class="article-heading"><a href="#后世果" class="headerlink" title="后世果"></a>后世果<a class="article-anchor" href="#后世果" aria-hidden="true"></a></h1><p>虽然这个theme_inject已经合并了，但还有许多需要改进</p>
<ul>
<li>有必要使NexT更结构化，以提供更多的注入点</li>
<li>评论系统的重构PR关闭了，多方面原因，我计划基于theme_inject重新重构它（Done）</li>
</ul>
      
    </div>

    







<div>
  <ul class="post-copyright">
    <li class="post-copyright-author">
      <strong>本文作者： </strong>
      Mr.J
    </li>
    <li class="post-copyright-link">
      <strong>本文链接：</strong>
      <a href="https://jiangtj.com/articles/beechnut/hexo-next-injects/">https://jiangtj.com/articles/beechnut/hexo-next-injects/</a>
    <li class="post-copyright-license">
      <strong>版权声明： </strong>
      本博客所有文章除特别声明外，均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="creative-commons" class="svg-inline--fa fa-creative-commons icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M245.83 214.87l-33.22 17.28c-9.43-19.58-25.24-19.93-27.46-19.93-22.13 0-33.22 14.61-33.22 43.84 0 23.57 9.21 43.84 33.22 43.84 14.47 0 24.65-7.09 30.57-21.26l30.55 15.5c-6.17 11.51-25.69 38.98-65.1 38.98-22.6 0-73.96-10.32-73.96-77.05 0-58.69 43-77.06 72.63-77.06 30.72-.01 52.7 11.95 65.99 35.86zm143.05 0l-32.78 17.28c-9.5-19.77-25.72-19.93-27.9-19.93-22.14 0-33.22 14.61-33.22 43.84 0 23.55 9.23 43.84 33.22 43.84 14.45 0 24.65-7.09 30.54-21.26l31 15.5c-2.1 3.75-21.39 38.98-65.09 38.98-22.69 0-73.96-9.87-73.96-77.05 0-58.67 42.97-77.06 72.63-77.06 30.71-.01 52.58 11.95 65.56 35.86zM247.56 8.05C104.74 8.05 0 123.11 0 256.05c0 138.49 113.6 248 247.56 248 129.93 0 248.44-100.87 248.44-248 0-137.87-106.62-248-248.44-248zm.87 450.81c-112.54 0-203.7-93.04-203.7-202.81 0-105.42 85.43-203.27 203.72-203.27 112.53 0 202.82 89.46 202.82 203.26-.01 121.69-99.68 202.82-202.84 202.82z"></path></svg>BY-NC-SA</a> 许可协议。转载请注明出处！    </li>
  </ul>
</div>


    
<div class="post-tags">
  
  <a href="/tags/Hexo/" rel="tag"># Hexo</a>
  
  <a href="/tags/NexT/" rel="tag"># NexT</a>
  
</div>


    
    <div class="reward-container"><div>Buy me a cup of milkshake 🍨.</div><div class="reward-box"><div class="reward-box-card wechat">
  <img class="reward-image" src="/images/wechatpay.png" />
  
</div>
<div class="reward-box-card alipay">
  <img class="reward-image" src="/images/alipay.png" />
  
  <a class="reward-image-url" href="HTTPS://QR.ALIPAY.COM/FKX06416WJNHOWKMRQQFFE">点击跳转</a>
  
</div>
<div class="reward-box-card paypal">
  <img class="reward-image" src="/images/paypal.png" />
  
  <a class="reward-image-url" target="_blank" rel="noopener" href="https://www.paypal.me/jiangtj">https://www.paypal.me/jiangtj</a>
  
</div>
<div class="reward-box-card kofi">
  <img class="reward-image" src="/images/kofi.png" />
  
  <a class="reward-image-url" target="_blank" rel="noopener" href="https://ko-fi.com/jiangtj">https://ko-fi.com/jiangtj</a>
  
</div>
</div><div class="reward-group"><a class="reward-button wechat"><span><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="weixin" class="svg-inline--fa fa-weixin icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M385.2 167.6c6.4 0 12.6.3 18.8 1.1C387.4 90.3 303.3 32 207.7 32 100.5 32 13 104.8 13 197.4c0 53.4 29.3 97.5 77.9 131.6l-19.3 58.6 68-34.1c24.4 4.8 43.8 9.7 68.2 9.7 6.2 0 12.1-.3 18.3-.8-4-12.9-6.2-26.6-6.2-40.8-.1-84.9 72.9-154 165.3-154zm-104.5-52.9c14.5 0 24.2 9.7 24.2 24.4 0 14.5-9.7 24.2-24.2 24.2-14.8 0-29.3-9.7-29.3-24.2.1-14.7 14.6-24.4 29.3-24.4zm-136.4 48.6c-14.5 0-29.3-9.7-29.3-24.2 0-14.8 14.8-24.4 29.3-24.4 14.8 0 24.4 9.7 24.4 24.4 0 14.6-9.6 24.2-24.4 24.2zM563 319.4c0-77.9-77.9-141.3-165.4-141.3-92.7 0-165.4 63.4-165.4 141.3S305 460.7 397.6 460.7c19.3 0 38.9-5.1 58.6-9.9l53.4 29.3-14.8-48.6C534 402.1 563 363.2 563 319.4zm-219.1-24.5c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.8 0 24.4 9.7 24.4 19.3 0 10-9.7 19.6-24.4 19.6zm107.1 0c-9.7 0-19.3-9.7-19.3-19.6 0-9.7 9.7-19.3 19.3-19.3 14.5 0 24.4 9.7 24.4 19.3.1 10-9.9 19.6-24.4 19.6z"></path></svg></span></a><a class="reward-button alipay"><span><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="alipay" class="svg-inline--fa fa-alipay icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M377.74 32H70.26C31.41 32 0 63.41 0 102.26v307.48C0 448.59 31.41 480 70.26 480h307.48c38.52 0 69.76-31.08 70.26-69.6-45.96-25.62-110.59-60.34-171.6-88.44-32.07 43.97-84.14 81-148.62 81-70.59 0-93.73-45.3-97.04-76.37-3.97-39.01 14.88-81.5 99.52-81.5 35.38 0 79.35 10.25 127.13 24.96 16.53-30.09 26.45-60.34 26.45-60.34h-178.2v-16.7h92.08v-31.24H88.28v-19.01h109.44V92.34h50.92v50.42h109.44v19.01H248.63v31.24h88.77s-15.21 46.62-38.35 90.92c48.93 16.7 100.01 36.04 148.62 52.74V102.26C447.83 63.57 416.43 32 377.74 32zM47.28 322.95c.99 20.17 10.25 53.73 69.93 53.73 52.07 0 92.58-39.68 117.87-72.9-44.63-18.68-84.48-31.41-109.44-31.41-67.45 0-79.35 33.06-78.36 50.58z"></path></svg></span></a><a class="reward-button paypal"><span><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="paypal" class="svg-inline--fa fa-paypal icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M111.4 295.9c-3.5 19.2-17.4 108.7-21.5 134-.3 1.8-1 2.5-3 2.5H12.3c-7.6 0-13.1-6.6-12.1-13.9L58.8 46.6c1.5-9.6 10.1-16.9 20-16.9 152.3 0 165.1-3.7 204 11.4 60.1 23.3 65.6 79.5 44 140.3-21.5 62.6-72.5 89.5-140.1 90.3-43.4.7-69.5-7-75.3 24.2zM357.1 152c-1.8-1.3-2.5-1.8-3 1.3-2 11.4-5.1 22.5-8.8 33.6-39.9 113.8-150.5 103.9-204.5 103.9-6.1 0-10.1 3.3-10.9 9.4-22.6 140.4-27.1 169.7-27.1 169.7-1 7.1 3.5 12.9 10.6 12.9h63.5c8.6 0 15.7-6.3 17.4-14.9.7-5.4-1.1 6.1 14.4-91.3 4.6-22 14.3-19.7 29.3-19.7 71 0 126.4-28.8 142.9-112.3 6.5-34.8 4.6-71.4-23.8-92.6z"></path></svg></span></a><a class="reward-button kofi"><span><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="coffee" class="svg-inline--fa fa-coffee icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z"></path></svg></span></a></div></div>    

    
    <footer class="post-footer">
      
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/articles/beechnut/spring-cloud-gateway/" rel="prev" title="Spring Cloud 之 Gateway （Greenwich版）">
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"></path></svg>
      Spring Cloud 之 Gat...
    </a></div>
      <div class="post-nav-item">
    <a href="/articles/beechnut/hexo-git-submodule/" rel="next" title="使用Git Submodule管理Hexo主题">
      使用Git Submodule管理H...
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"></path></svg>
    </a></div>
    </div>    </footer>
    
  </div>
</article>
</div>
        </div>
        




<div class="card comment-body disqus active">
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = 'https://jiangtj.com/articles/beechnut/hexo-next-injects/';;  // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = 'articles/beechnut/hexo-next-injects/'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://jiangtj.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a target="_blank" rel="noopener" href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>



      </main>

      <footer class="footer">
        <div>
          <div class="copyright">
  
  &copy; 
  <span>2022</span>
  <span class="with-love">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heart" class="svg-inline--fa fa-heart icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>
    <i class="[object Object]"></i>
  </span>
  <span class="author">Mr.J</span>
</div>

<div class="powered-by">
  由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> 强力驱动 v6.1.0
</div>

<span class="post-meta-divider">|</span>

<div class="theme-info">
  主题 – <a href="https://github.com/JiangTJ/hexo-theme-cake" class="theme-link" rel="noopener" target="_blank">Cake</a> v4.0.0
</div>

        </div>
      </footer>

    </div>

  </div>

  <div class="search-popup">
  <div class="search-header">
    <span class="search-icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span>
    <div class="search-input-container">
      <input autocomplete="off" autocorrect="off" autocapitalize="none" placeholder="搜索..."
        spellcheck="false" type="text" id="search-input">
    </div>
    <span class="popup-btn-close"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times-circle" class="svg-inline--fa fa-times-circle icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg></span>
  </div>
  <div id="search-result"></div>
</div>
<div class="search-pop-overlay"></div>
<script id="ribbon" size="300" alpha="0.6" zIndex="-1" src="//cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js"></script><script>
((window.gitter = {}).chat = {}).options = {
  room: 'jiangtj/Lobby',
  activationElement: false
};
</script><script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script><script>
  (function () {
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
  })();
</script>
<div class="moon-menu">
  <div class="moon-menu-items">
    
    <div id="moon-menu-item-back2bottom" class="moon-menu-item">
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"></path></svg>    </div>
    
    <div id="moon-menu-item-back2top" class="moon-menu-item">
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-up" class="svg-inline--fa fa-chevron-up icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path></svg>    </div>
    
    <div id="moon-menu-item-chat" class="moon-menu-item">
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="comments" class="svg-inline--fa fa-comments icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z"></path></svg>    </div>
    
    <div id="moon-menu-item-switch_color" class="moon-menu-item">
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="adjust" class="svg-inline--fa fa-adjust icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z"></path></svg>    </div>
    
  </div>
  <div class="moon-menu-button">
    <svg class="moon-menu-bg">
      <circle class="moon-menu-cricle" cx="50%" cy="50%" r="44%"></circle>
      <circle class="moon-menu-border" cx="50%" cy="50%" r="48%"></circle>
    </svg>
    <div class="moon-menu-content">
      <div class="moon-menu-icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="ellipsis-v" class="svg-inline--fa fa-ellipsis-v icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"></path></svg></div>
      <div class="moon-menu-text"></div>
    </div>
  </div>
</div><script src="/js/injector.js"></script>
<!-- hexo injector body_end start --><script>
// Check that service workers are supported
if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js');
  });
}
</script>
<!-- hexo injector body_end end --></body>

</html>
